Ext.onReady(function() {
  Ext.Ajax.defaultHeaders = {
    'Accept': 'application/json'
  };
  
  var grid = null;

  var store = new Ext.data.JsonStore({
    fields: [
       {name: 'id', type: 'int'},
       {name: 'stringAttribute'}
    ],

    autoLoad: true,
    
    proxy: {
      type: 'ajax',

      noCache: false,
      pageParam: false,
      limitParam: false,
      startParam: false,

      url : restPath + '/list-rows/list-rows-table-data',
      reader: {
        type: 'json',
        root: 'data',
        idProperty: 'id'
      },
      listeners: {
        exception: MyApp.common.handleStoreLoadException
      }
    },
    
    listeners: {
      load: function () {if(grid != null) grid.doLayout(); else alert("null");}
    }
  });
  
  Ext.namespace("MyApp.list_rows.list_rows_table");
  MyApp.list_rows.list_rows_table.store = store;
  
  grid = Ext.create('Ext.grid.Panel', {
    store: store,
    
    columns: [
      {header: "Id", width: 50, sortable: true, dataIndex: 'id'},
      {header: "stringAttribute", flex: 1,  sortable: true, dataIndex: 'stringAttribute', renderer: Ext.util.Format.htmlEncode},
      {header: "Actions", width: 120, sortable: false, menuDisabled: true, xtype:'templatecolumn', tpl:'<a href="'+htmlPath+'/view-row/view-row.html#id={id}">Details</a> | <a href="'+htmlPath+'/edit-row/edit-row.html#id={id}">Edit</a> | <a href="javascript:MyApp.in_page.delete_row.deleteRow({id}, function() { MyApp.list_rows.list_rows_table.store.load();})">Delete</a>'}
    ],

    stateId: 'list-rows-table',

    emptyText: "There are no rows in the database, or no rows match your search filter.",

    stripeRows: true,
    border: true,
    disableSelection: true,
//    forceFit: true,
    
    renderTo: 'table-div',

    tbar:[
      {
        text: 'Add row',
        icon: staticPath + "/@images/add.png@",
        handler: function (button) {
          document.location = htmlPath + '/edit-row/edit-row.html';
        }
      }
    ]
    
//    ,
//    
//    plugins:[new Ext.ux.grid.Search({
//      align: 'right',
//      width: 200,
//      minChars: 2,
//      autoFocus: true,
//      position: 'top',
//      mode: 'local'
//    })]
  });
  
  Ext.EventManager.onWindowResize(function () {grid.doLayout();});
  
  var loadMask = new Ext.LoadMask(grid.getEl(), {
    store: store,
    removeMask: true
  });
});
